<template>
  <div class="friendiylink_page">
       <Card :padding="0" shadow style="width: 300px;padding:0 0 20px  0">
            <p slot="title">
                <Icon type="ios-link" />
                友情链接
            </p>
            <a href="http://wpa.qq.com/msgrd?v=3&uin=2292100085&site=qq&menu=yes" slot="extra" target="_blank">
             <Icon type="ios-add" size="24"/>
                <!-- Change -->
            </a>
           <ul class="tag">
               <li v-for="(item,index) in list" :key="index"><a :href="item.link" target="_blank" rel="noopener noreferrer">{{item.name}}</a></li>
           </ul>
        </Card>
  </div>
</template>

<script>
export default {
    data(){
        return{
            page:0,
            limit:20,
            list:[],
        }
    },
    methods:{
        init(){
            this.$axios.get('/api/manage/link/get',{params:{page:this.page,limit:this.limit}}).then(res =>{
                if(res.data.err_code == 1){
                    this.list = res.data.data
                }else{
                    // console.error(res.data.message)
                }
            })
        }
    },
    mounted(){
        this.init()
    }
}
</script>

<style scoped>
    .friendiylink_page{
        margin-top: 20px;
    }
    .tag{
        padding: 6px;
        display: inline-flex;
        flex-wrap: wrap;
    }
    .tag li{
        list-style: none;
        margin-top: 6px;
        margin-left: 10px;
    }
    .tag li a{
        display: inline-block;
        width: 130px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        color: #119966;
    }
</style>